<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通讯</title>
</head>
<body>


<div id="app">
    <div>
        <p>
            {{messge}}
        </p>
        <cpn :movies="movies" @getcpn="getcpn"></cpn>

        <p>
            计算总数为{{counter}}
            <comput @inc="inc" @dec="dec"></comput>
        </p>
    </div>
</div>


<template id="cpn">
    <div>
        电影有：
        <ul>
            <li v-for="item in movies" @click="clickcpn(item)">{{item}}</li>
        </ul>
    </div>
</template>


<template id="comput">
    <div>
        <button @click="inc">+1</button>
        <button @click="dec">-1</button>
    </div>
</template>

<script src="../js/vue.js"></script>
<script>
  let cpn = {
    template: '#cpn',
    //props: ['movies']
    props: {
      movies: {
        type: Array,
        required: false,
        default() {
          return ['西游记'];
        }
      }
    },
    methods: {
      clickcpn(item) {
        this.$emit('getcpn', item)
      }
    }
  }

  let comput = {
    template: '#comput',
    data() {
      return {
        count: 0
      }
    },
    methods: {
      inc() {
        this.$emit('inc', ++this.count);
      },
      dec() {
        this.$emit('dec', --this.count);
      }
    }
  }
  const app = new Vue({
    el: '#app',
    data: {
      messge: '这是信息',
      movies: ['海王', '海贼王', '海尔兄弟'],
      counter: 0
    },
    components: {
      cpn,
      comput
    },
    methods: {
      getcpn(item) {
        console.log('父组件收到了：' + item);
      },
      inc(counter) {
        this.counter = counter;
      },
      dec(counter) {
        this.counter = counter;
      }
    }
  })

</script>


</body>
</html>